<template>
	<view>
		<!-- 自定义头部 -->
		<view class="header_nav">
			<view class="status_bar" :style="{height:recHeight+'px'}"></view><!-- 状态栏 -->
			<view class="header_title" :style="{height:titleBarHeight+'px',top:recHeight+'px',lineHeight:titleBarHeight+'px'}">
				<!-- 顶部导航栏 -->
				<view class="_black _font-18 _w-max _pos-rel _flex-row-center-mid">
					<navigator open-type="navigateBack" class="_font-18 _pos-abs-left _pad-x-15 iconfont icon-zuo"></navigator>{{'个人资料'}}
				</view>
			</view>
		</view>
		<image class="_w-max" src="https://uxcar.uxphp.net/uploads/attach/2023/07/20230731/c78d8950ddfad51ebf98d93a8d1e50fa.png" mode="widthFix"></image>
		<view class="_w-max _flex-row-ard-mid" style="margin-top: -360rpx;">
			<button class="avatar-box" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image :src="userInfo.avatar" mode="aspectFill"></image>
			</button>
		</view>
		<view class="_pad-x-15 menu-box">
			<view class="menu">
				<view class='item _pad-x-15 acea-row row-between-wrapper'>
					<view>姓名</view>
					<view class='input'>
						<input type='nickname' name='nickname' v-model="userInfo.nickname"></input>
					</view>
				</view>
				<view class='item _pad-x-15 acea-row row-between-wrapper'>
					<view>性别</view>
					<picker class='input' range-key="label" :range="sex_list" :data-type="1" @change="changeSex">
						<input type='text' name='nickname' :value="userInfo.sex" disabled="ture"></input>
					</picker>
				</view>
				<view class='item _pad-x-15 acea-row row-between-wrapper'>
					<view>手机号码</view>
					<view class='input'>
						<input type='text' name='phone' v-model="userInfo.phone"></input>
					</view>
				</view>
				<view class='item _pad-x-15 acea-row row-between-wrapper'>
					<view>所在城市</view>
					<view class='input'>
						<input type='text' name='city' v-model="userInfo.city"></input>
					</view>
				</view>
			</view>
		</view>
		<view class="_w-max _sub-use">
			<button class="theme-color-bg btn" @click="submit">保存</button>
		</view>
	</view>
</template>

<script>
	import { getUserInfo } from '@/api/user.js';
	import { submitUser } from '@/api/car.js';
	export default {
		data() {
			return {
				recHeight: '',//状态栏高度
				titleBarHeight:'', //顶部标题栏高度
				MenuButtonHeight: '', //小胶囊高度
				MenuButtonTop: '',//顶部距离
				headerHeight:'',//头部总高度
				
				userInfo: {},
				sex_list:[
					{
						value:1,
						label:'男',
					},{
						value:2,
						label:'女',
					}
				],
			}
		},
		onLoad() {
			this.getPhoneInfo();
			this.getUserInfo();
		},
		methods: {
			// 保存
			submit(){
				let that = this;
				uni.showLoading({title: '提交中...'})
				submitUser(that.userInfo).then((res)=>{
					uni.hideLoading();
					uni.showToast({title: '提交成功',icon:'none'})
					that.getUserInfo();
				}).catch((err)=>{
					uni.hideLoading();
					uni.showToast({title: err,icon:'none'});
					setTimeout(()=>{
						uni.navigateBack();
					},1000);
				})
			},
			// 选择头像
			onChooseAvatar(e) {
				let {
					avatarUrl
				} = e.detail;
				this.$util.uploadImgs('upload/image',avatarUrl,(res)=>{
					this.userInfo.avatar = res.data.url
				});
			},
			// 选择性别
			changeSex(e){
				this.userInfo.sex = this.sex_list[e.detail.value].label;
			},
			// 获取用户信息
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.$set(that, 'userInfo', res.data);
				});
			},
			// 顶部导航栏 配置
			getPhoneInfo() {
				let that = this;
				uni.getSystemInfo({
					success(res){
						that.recHeight = res.statusBarHeight;//获取状态栏高度
						that.titleBarHeight = (that.MenuButtonHeight + (that.MenuButtonTop - res.statusBarHeight) * 2);
						that.headerHeight = (res.statusBarHeight) + (that.MenuButtonHeight + (that.MenuButtonTop - res.statusBarHeight) * 2);
					}
				})
				const query = uni.createSelectorQuery().in(that);
				    query.select('.shops_search').boundingClientRect(data => {
				}).exec();
			},
		}
	}
</script>

<style scoped lang="scss">
	.header_nav {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;
			//顶部导航栏
		.status_bar {
			width: 100%;
			position: fixed;
			z-index: 9;
		}
		.header_title {
			width: 100%; 
			position: relative;
			z-index: 999;
		}
	}
	.avatar-box {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
	.menu-box {
		width: 100%;
		margin-top: 50rpx;
		z-index: 30;
		position: fixed;
		.menu {
			width: 100%;
			border-radius: 20rpx;
			background-color: #FFFFFF;
			font-size: 28rpx;
			color: #252525;
			.item {
				width: 100%;
				height: 108rpx;
				border-bottom: 1rpx solid #F7F8FA;
				&:last-child {
					border-bottom: none;
				}
			}
		}
	}
	.input {
		width: 460rpx;
		text-align: right;
		color: #101010;
	}
	._sub-use {
		position: absolute;
		padding: 0rpx 50rpx;
		bottom: 90rpx;
		text-align: center;
	}
	._sub-use .btn {
		line-height: 90rpx;
		border-radius: 50rpx;
		color: #FFFFFF;
	}
</style>
